<!-- 基础配置-原材料 -->
<template>
  <el-dialog :title="title" :visible.sync="open" width="100%" append-to-body :close-on-click-modal="false" v-dialogDrag>
  <div class="app-container" style="background: #f3f6f9;height: 100%;overflow-y: hidden;">
    <el-row style="height: 100%;">
      <el-col :span="5" style="height: 100%;">
        <div class="boxcss">
          <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true">
            <el-form-item prop="type">
              <el-input style="font-size: 12px;" v-model="queryParams.name" prefix-icon="el-icon-search"
                        placeholder="请输入产品" clearable @keyup.enter.native="handleQuery">
                <el-button slot="append" @click="handleQuery">搜索</el-button>
              </el-input>
              <el-button size="mini" slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
            </el-form-item>
          </el-form>
          <div class="ulbox" v-if="CpList.length != 0">
            <!-- <div :class=" isType == index ? 'libox1' : 'libox'" v-for="(item,index) in typeList" :key="index"
                 @click="onType(index)">
              {{item}}
            </div> -->
            <div :class="isType == index ? 'libox3' : 'libox2'" v-for="(item,index) in CpList" :key="index" @click="onType(index,item)">
              <div class="topbox">
                <div class="topboxhbox">
                  <i class="el-icon-s-order" style="color: #409EFF;margin-right: 5px;"></i>
                  {{item.code}}
                </div>
                <div style="margin-left: auto;width: 50px;display: flex;justify-content: space-between;">
               <!-- <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(index)">
                  <i class="el-icon-document" slot="reference"></i>
                </el-popconfirm>-->
              </div>
              </div>
              <div :class="isType == index ? 'hcss1' : 'hcss'">
                <!-- {{typeList[isType]}}MD-{{index}} -->
                {{item.name}}
              </div>
            </div>
          </div>
          <el-empty :image-size="200" description="暂无产品" style="margin-top: 200px;" v-else></el-empty>
        </div>
      </el-col>
      <el-col :span="7" style="height: 100%;">
        <div class="boxcss">
          <div style="display: flex;align-items: center;">
            <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true">
              <el-form-item prop="type">
                <el-input style="font-size: 12px;" v-model="queryParams1.name" placeholder="请输入工艺" clearable
                          @keyup.enter.native="handleQuery">
                  <el-button size="mini" slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addGongYi">选择工艺</el-button>
          </div>
          <div class="ulbox" v-if="GyList.length != 0">
            <div :class="isNum == index ? 'libox3' : 'libox2'" v-for="(item,index) in GyList" :key="index" @click="onNum(index,item)">
              <div class="topbox">
                <div class="topboxhbox">
                  <i class="el-icon-s-order" style="color: #409EFF;margin-right: 5px;"></i>
                  {{ item.code }}
                </div>
                <div style="margin-left: auto;width: 50px;display: flex;justify-content: space-between;">

               <!-- <el-popconfirm :title="`确认默认当前工艺吗？`" @confirm="handleGy(index,item)" >
                  <i class="el-icon-s-claim" slot="reference"></i>
                </el-popconfirm>-->
                </div>
              </div>
              <div :class="isNum == index ? 'hcss1' : 'hcss'">
                <!-- {{typeList[isType]}}MD-{{index}} -->
                {{ item.name }}
              </div>
            </div>
          </div>
          <el-empty :image-size="200" description="暂无工艺" style="margin-top: 200px;" v-else></el-empty>
        </div>
      </el-col>
      <el-col :span="7" style="height: 100%;">
        <div class="boxcss">
          <div style="display: flex;align-items: center;">
            <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true">
              <el-form-item prop="type">
                <el-input style="font-size: 12px;" v-model="queryParams.num" placeholder="请输入工序" clearable
                          @keyup.enter.native="handleQuery">
                  <el-button size="mini" slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addGx">添加工序</el-button>
          </div>
          <div class="ulbox" v-if="GxList.length != 0">
            <div :class="isNums == index ? 'libox3' : 'libox2'" v-for="(item,index) in GxList" :key="index" @click="onNums(index,item)">
              <div class="topbox">
                <div class="topboxhbox">
                  <i class="el-icon-s-order" style="color: #409EFF;margin-right: 5px;"></i>
                 <!--排序：{{ item.idx }} -->工序编码：{{ item.code }}
                </div>
                <div style="margin-left: auto;width: 50px;display: flex;justify-content: space-between;">
                <el-popconfirm :title="`确认删除当前数据项？`" @confirm="gxDelete(item)">
                  <i class="el-icon-delete" slot="reference"></i>
                </el-popconfirm>
                </div>
              </div>
              <div :class="isNums == index ? 'hcss1' : 'hcss'">
                <!-- {{typeList[isType]}}MD-{{index}} -->
                {{ item.name }}
              </div>
            </div>
          </div>
          <el-empty :image-size="200" description="暂无工序" style="margin-top: 200px;" v-else></el-empty>
        </div>
      </el-col>
      <el-col :span="5" style="height: 100%;">
        <div class="boxcss">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item name="1">
                  <template slot="title">
                    <div
                      style="display: flex;align-items: center;justify-content: space-between;width: calc(100% - 15px);padding-right: 15px;">
                      <div class="hbox">
                        <div class="hboxxian"></div>
                        <div class="hboxhcss">
                          工序详情
                        </div>
                      </div>
                      <!-- <el-button size="mini" icon="el-icon-edit" @click.stop="onEdit(1)">编辑</el-button> -->
                    </div>
                  </template>
                  <div class="jculbox" v-if="GxForm.id">
                    <div class="jclibox">
                      <div class="jclihcss">工序编号</div>
                      <div class="jclitcss">{{GxForm.code}}</div>
                    </div>
                    <div class="jclibox">
                      <div class="jclihcss">工序名称</div>
                      <div class="jclitcss">{{GxForm.name}}</div>
                    </div>
                    <div class="jclibox">
                      <div class="jclihcss">工资</div>
                      <div class="jclitcss">{{GxForm.money}}</div>
                    </div>
                    <div class="jclibox">
                      <div class="jclihcss">图纸号</div>
                      <div class="jclitcss">{{GxForm.shuoming}}</div>
                    </div>
                    <!-- <div class="jclibox">
                      <div class="jclihcss">关联设备</div>
                      <div class="jclitcss">{{GxForm.photo}}</div>
                    </div> -->
                    <div class="jclibox">
                      <div class="jclihcss">工序文件</div>
                      <div class="jclitcss">{{GxForm.code}}</div>
                    </div>
                    <div class="jclibox">
                      <div class="jclihcss">备注</div>
                      <div class="jclitcss">{{GxForm.code}}</div>
                    </div>
                  </div>
                  <el-empty :image-size="200" description="暂无详情" style="margin-top: 200px;" v-else></el-empty>
                </el-collapse-item>
              </el-collapse>
            </div>
      </el-col>
    </el-row>
    <addGongyi-list ref="addGongYi" @ok="refresh1Bnt"></addGongyi-list>
    <addGxGyGoods-list ref="addGongxuList" @ok="refresh2Bnt"></addGxGyGoods-list>
    <RawMaterialNumberOrNameForm ref="rawMaterialNumberOrNameForm" @ok="getList" />
    <RawMaterialDetectionForm ref="rawMaterialDetectionForm" @ok="getList" />
  </div>
  <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="quBnt">取 消</el-button>
  </div>
</el-dialog>
</template>

<script>
import {addAction,deleteAction, getAction, getById} from '@/api/manage'
import AddGongyiList from '@/views/develop/lnGongyi/module/AddGongyiList'
import RawMaterialNumberOrNameForm from '@/views/develop/factory/setUp/module/RawMaterialNumberOrNameForm'
import AddGxGyGoodsList from '@/views/develop/lnGongyi/module/AddGxGyGoodsList'
import RawMaterialDetectionForm from '@/views/develop/factory/setUp/module/RawMaterialDetectionForm'
export default {
  name: 'ProcessList',
  components: {
    RawMaterialNumberOrNameForm,
    RawMaterialDetectionForm,
    AddGongyiList,
    AddGxGyGoodsList
  },
  data() {
    return {
      title:'工序选择',
      open:false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 研发经费表格数据
      dataList: [],
      activeName: '1',
      // 查询参数
      queryParams: {
          pageNum: 1,
          pageSize: 1000,
          id: null,
          code: null,
          name: null,
          model: null,
          //isdo: null,
          remark: null,
          produceId: null,
          issheding:'0',
          isAsc:"desc"
      },
      queryParams1: {
          pageNum: 1,
          pageSize: 1000,
          id: null,
          isAsc:"desc",
          //isdo:'1',
      },
      queryParams2:{
          pageNum: 1,
          pageSize: 1000,
          id: null,
          //orderByColumn: "idx",
          //isAsc:"asc",
          //isdo:'1',
      },
      proId:'',
      isType: 0,
      typeList: ['产品1','产品2','产品3','产品4','产品5','产品6'],
      isNum: 0,
      numList: [],
      tableMaxHeight: 0,
      isNums:0,
      url: {
          list: '/factoryProduceSaleAll/factoryProduceSaleAll/list',
          gylist: '/lnGongyigoods/lnGongyigoods/list',
          gxlist: '/goodsSaledoGongxu/goodsSaledoGongxu/list',
          gxditlist: '/lnGongyigongxu/lnGongyigongxu/list',
          getById: '/projectBaseInfo/projectBaseInfo/',
          remove:'/lnGongyigongxu/lnGongyigongxu/',
          xzgx:'/goodsSale/goodsSale/insertForPrjGygx'
      },
      CpList:[],
      GyList:[],
      GxList:[],
      GxForm:[],
      goodsId:'',
      cpId:'',
      cpForm:{}
    }
  },
  created() {
    this.getList();
    setTimeout(()=>{
      // this.tableMaxHeight = this.$refs.header.offsetHeight - this.$refs.headerTop.offsetHeight - 100
    },500)
    window.addEventListener('resize', this.getTableHeight);
  },
  mounted() {
    // this.tableMaxHeight = this.$refs.header.offsetHeight - this.$refs.headerTop.offsetHeight
  },
  destroyed() {
    window.removeEventListener('resize', this.getTableHeight)
  },
  methods: {
    // 取消
    quBnt() {
      this.open = false
    },
    // 删除工序
    gxDelete(row) {
        const ids = row.id || this.ids;
        deleteAction(this.url.remove, ids).then(response => {
          this.isNums = 0
          this.gongxiList(row);
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
    // 添加工序
    addGx(){
        this.$refs.addGongxuList.showGxGyGoods(this.queryParams2.gongyiId,this.queryParams.goodsId);
      },
    // 添加工艺
    addGongYi(){
        this.$refs.addGongYi.showGy(this.cpForm.goodsId,this.cpId);
      },
     /** 修改按钮操作 */
     handleUpdate(row) {
          this.reset();
          const id = row.id;
          this.proId = id;
         this.open = true;
         this.title = "工序选择";
         this.getList();
         /* this.proStatus = row.status;
          getById(this.url.getById, id).then(response => {
              this.open = true;
              this.title = "工序选择";
              this.getList();
          });*/
    },
    // 产品列表查询
    getList() {
        this.GyList=[]
        this.GxList=[]
        this.GxForm={}
        this.loading = true;
        this.queryParams.produceId = this.proId;
        //this.queryParams.issheding = "0";
        getAction(this.url.list, this.queryParams).then(response => {
            this.CpList = response.rows;
           if(response.rows[0]) {
            this.gongyiList(response.rows[0])
            this.goodsId = response.rows[0].goodsId
            this.cpForm =response.rows[0]
            this.cpId = response.rows[0].id
            this.total = response.total;
           }
            this.loading = false;
        });
    },
    // 工艺列表查询
    gongyiList(e) {
        this.loading = true;
        this.queryParams1.goodsId = e.goodsId
        // this.queryParams1.gongyiId = e.gongyiId
        getAction(this.url.gylist, this.queryParams1).then(response => {
          this.GyList = response.rows
          this.gongxiList(response.rows[0])
          this.loading = false;
        });
      },
      // 工序列表查询
      gongxiList(e) {
        this.loading = true;
        this.queryParams2.gongyiId = e.gongyiId
        getAction(this.url.gxditlist, this.queryParams2).then(response => {
          this.GxList = response.rows
          this.GxForm = response.rows[0]
          this.loading = false;
        });
      },
    reset() {
            this.form = {
              id: null,
              remark: null,
              delFlag: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null
            };
            this.resetForm("form");
          },
    getTableHeight() {
      this.tableMaxHeight = this.$refs.header.offsetHeight - this.$refs.headerTop.offsetHeight - 100
    },
    //新增原材料编号名称
    addNum(e) {
      if (e == 1) {
        this.$refs.rawMaterialNumberOrNameForm.handleAdd();
      } else {
        this.$refs.rawMaterialDetectionForm.handleAdd();
      }
    },
    //编辑原材料编号名称
    onEdit(e) {
      if (e == 1) {
        var obj = {
          id: 1,
          num: 'YLI24103100271',
          name: '金属杆001',
          type: '金属杆',
          batchNum: 'PCH1730553018127',
          brand: 'xiaomi',
          unit: 'kg',
          manufacturer: 'xiaomizhineng',
          origin: '上海',
          putStorageTime: '2024-10-21',
          voltageLevel: '16kv',
          speModels: '型号1730353018127',
          eipMatDes: '暂无备注'
        }
        this.$refs.rawMaterialNumberOrNameForm.handleUpdate(obj);
      } else {
        var obj = {}
        this.$refs.rawMaterialDetectionForm.handleUpdate(obj);
      }
    },
    // 添加完工艺刷新
    refresh1Bnt() {
      this.isNum = 0
      this.isNums = 0
      this.GyList=[]
      this.GxList=[]
      this.GxForm = {}
      this.gongyiList({goodsId:this.cpForm.goodsId})
    },
    // 添加工序刷新
    refresh2Bnt() {
      this.isNum = 0

      this.gongxiList({gongyiId:this.queryParams2.gongyiId })
    },
    //一级筛选
    onType(e,item) {
      this.isType = e
      this.isNum = 0
      this.isNums = 0
      this.GyList=[]
      this.GxList=[]
      this.GxForm = {}
      this.queryParams1.goodsId = item.goodsId
      this.goodsId = item.goodsId
      this.cpId = item.id
      this.cpForm = item
      this.gongyiList(item)
    },
    onNum(e,item){
      this.isNum = e
      this.isNums = 0
      this.GxList=[]
      this.gongxiList(item)
    },
    onNums(e,item){
      this.isNums = e
      this.GxForm = item
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(e) {
      this.getList();
      this.$modal.msgSuccess("删除成功");
    },
    submitForm() {
      addAction(this.url.xzgx, {columnsGongxu:this.GxList,gongyiId:this.GyList[0].gongyiId,goodsId:this.goodsId,saleId:this.cpId}).then(response => {
        this.isNum = 0
        this.isNums = 0
        this.GyList=[]
        this.GxList=[]
        this.GxForm = {}
        this.gongyiList({goodsId:this.cpForm.goodsId})
          this.$modal.msgSuccess("设置成功");
          this.open = false
        }).catch(() => {});
    },
    handleGy(e,item) {
      addAction(this.url.xzgx, {columnsGongxu:this.GxList,gongyiId:item.gongyiId,goodsId:this.goodsId,saleId:this.cpId}).then(response => {
        this.isNum = 0
        this.isNums = 0
        this.GyList=[]
        this.GxList=[]
        this.GxForm = {}
        this.gongyiList({goodsId:this.cpForm.goodsId})
          this.$modal.msgSuccess("默认成功");

        }).catch(() => {});
      console.log(this.goodsId,item.gongyiId,this.GxList)
      // this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item--medium,
::v-deep .el-form-item__content {
  width: 100%;
}

::v-deep .el-collapse-item__wrap,
::v-deep .el-collapse,
::v-deep .el-collapse-item__header {
  border: none;
}

::v-deep .el-date-editor--daterange.el-input__inner {
  width: 228px;
}

::v-deep .el-form-item__label {
  font-size: 12px;
  font-weight: 500;
  padding: 0 5px 0 0;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

.jculbox {
  flex-wrap: wrap;
  padding: 0 10px;
}

.jclibox {
  display: flex;
  // align-items: center;
  width: 400px;
  margin-top: 15px;
}

.jclihcss {
  font-size: 12px;
  color: #909399;
  margin-right: 10px;
}

.jclitcss {
  font-size: 12px;
  color: #333;
}

.hbox {
  display: flex;
  align-items: center;
}

.hboxhcss {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.hboxxian {
  width: 5px;
  height: 18px;
  background: #1890ff;
  margin-right: 5px;
  border-radius: 2px;
}

.boxcss {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-right: 15px;
  height: 100%;
}

.martcss {
  margin-top: 15px;
}

.ulbox {
  height: calc(100% - 65px);
  overflow-y: scroll;
  margin-top: 15px;
}

.libox {
  color: #333;
  background: #fff;
  border-color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 12px;
}

.libox1 {
  color: #1890ff;
  background: #e8f4ff;
  border-color: #a3d3ff;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
}

.libox2 {
  background: #fff;
  border-color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid #90939950;
  margin-bottom: 10px;
}

.libox3 {
  background: #e8f4ff;
  border-color: #a3d3ff;
  border: 1px solid #1890ff;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.topbox {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  margin-bottom: 15px;
}

.topboxhbox {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.hcss {
  font-size: 12px;
  color: #333;
}

.hcss1 {
  font-size: 12px;
  font-weight: 500;
  color: #1890ff;
}
</style>
